import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:myflutterproject/basematerialwidgetsdemo.dart';
import 'package:myflutterproject/utils/overScrollBehavior.dart';

class AnimatedCrossFadeDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => AnimatedCrossFadeState();
}

class AnimatedCrossFadeState extends State<AnimatedCrossFadeDemo> {
  bool _showFirst = true;
  bool _showFirst1 = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: (Text('AnimatedCrossFade')),
          centerTitle: true,
        ),
        body: ScrollConfiguration(
          behavior: OverScrollBehavior(),
          child: Column(
            children: [
              TextWidget('相同尺寸转换:'),
              Center(
                child: AnimatedCrossFade(
                  duration: Duration(seconds: 1),
                  crossFadeState: _showFirst
                      ? CrossFadeState.showFirst
                      : CrossFadeState.showSecond,
                  firstChild: Container(
                    width: 150,
                    height: 150,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        shape: BoxShape.circle, color: Colors.blue),
                    child: Text(
                      '1',
                      style: TextStyle(fontSize: 20, color: Colors.white),
                    ),
                  ),
                  secondChild: Container(
                    width: 150,
                    height: 150,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        shape: BoxShape.rectangle,
                        color: Colors.orange,
                        borderRadius: BorderRadius.circular(20)),
                    child: Text(
                      '2',
                      style: TextStyle(fontSize: 20, color: Colors.white),
                    ),
                  ),
                ),
              ),
              Padding(padding: EdgeInsets.all(20)),
              ElevatedButton(
                  style: ElevatedButton.styleFrom(
                      padding:
                          EdgeInsets.symmetric(vertical: 15, horizontal: 20)),
                  onPressed: () {
                    setState(() {
                      _showFirst = !_showFirst;
                    });
                  },
                  child: Text(
                    '点击转换',
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  )),
              TextWidget(
                  '不同尺寸转换:当矩形过渡到圆形时有一个抖动，矩形直接变为圆形直径，解决抖动问题使用layoutBuilder'),
              Center(
                child: AnimatedCrossFade(
                 /* layoutBuilder: (child1, key1, child2, key2) {
                    return Stack(
                      //超出部分显示
                      overflow: Overflow.visible,
                      alignment: Alignment.center,
                      children: [
                        Positioned(top: 0, bottom: 0, key: key2, child: child2),
                        Positioned(key: key2, child: child2),
                      ],
                    );
                  },*/
                  duration: Duration(seconds: 1),
                  crossFadeState: _showFirst1
                      ? CrossFadeState.showFirst
                      : CrossFadeState.showSecond,
                  firstChild: Container(
                    width: 150,
                    height: 150,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        shape: BoxShape.circle, color: Colors.blue),
                    child: Text(
                      '1',
                      style: TextStyle(fontSize: 20, color: Colors.white),
                    ),
                  ),
                  secondChild: Container(
                    width: 200,
                    height: 50,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        shape: BoxShape.rectangle,
                        color: Colors.orange,
                        borderRadius: BorderRadius.circular(20)),
                    child: Text(
                      '2',
                      style: TextStyle(fontSize: 20, color: Colors.white),
                    ),
                  ),
                ),
              ),
              Padding(padding: EdgeInsets.all(20)),
              ElevatedButton(
                  style: ElevatedButton.styleFrom(
                      padding:
                      EdgeInsets.symmetric(vertical: 15, horizontal: 20)),
                  onPressed: () {
                    setState(() {
                      _showFirst1 = !_showFirst1;
                    });
                  },
                  child: Text(
                    '点击转换',
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  )),
            ],
          ),
        ));
  }
}
